<template>
  <div class="table-page-search-wrapper" style="margin-top: 20px;">
    <a-form layout="inline" @keyup.enter.native="search">
      <a-row :gutter="48">
        <a-col :xxl="8" :xl="8" :lg="8" :sm="8">
          <a-form-item label="关键字">
            <a-input v-model="queryParam.keyWord" placeholder="请输入" allowClear />
          </a-form-item>
        </a-col>
        <a-col :xxl="10" :xl="10" :lg="10" :sm="10">
          <a-form-item label="时间">
            <a-range-picker style="width:100%;" show-time valueFormat="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss" v-model="queryParam.time" />
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="6" :lg="6" :sm="6">
          <span class="table-page-search-submitButtons">
            <a-button type="primary" @click="search">查询</a-button>
            <a-button style="margin-left: 8px" @click="reset">重置</a-button>
          </span>
        </a-col>
        <a-col :xxl="24" :xl="24" :lg="24" :sm="24">
          <span class="table-page-search-submitButtons">
            <!-- <a-button type="primary" @click="search">更新数据</a-button> -->
            <a-button type="primary" style="margin-left: 8px" @click="handleAddOfficialNo">新增账号</a-button>
            <a-button style="margin-left: 8px" @click="handleExport">导出</a-button>
            <a-upload
              accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
              name="file"
              :showUploadList="false"
              :multiple="false"
              :action="uploadUrl"
              @change="handleChange"
            >
              <a-button style="margin-left: 8px;">批量导入</a-button>
            </a-upload>
            <a-button style="margin-left: 8px" @click="handleDownload">点击下载导入模版</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
import { templateUpload, templateDownload } from '@/api/micromall/communityUser'
export default {
  props: {},
  data() {
    return {
      uploadUrl: templateUpload,
      queryParam: {
        keyWord: ''
      }
    }
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    // 批量添加用户
    handleChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        const {msg, message, code} = info.file.response
        if (code == 200 ) {
          const { failNumber, filePath, successNumber } = info.file.response.data
          this.$emit('onImportSuccess')
          if (failNumber > 0) {
            this.$confirm({
              title: `${successNumber}条数据导入成功，${failNumber}条数据导入失败`,
              icon: 'none',
              closable: false,
              okText: '下载导入失败数据',
              cancelText: '取消',
              onOk() {
                window.location.href = templateDownload +`?path=${filePath}`
              },
              onCancel() {}
            })
          } else {
            this.$message.success(`${successNumber}条数据导入成功！`)
          }
        } else {
          this.$message.error(msg || message)
        }
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} 上传失败.`)
      }
    },

    //  点击下载导入模版
    handleDownload() {
      this.$emit('onDownload')
    },

    handleExport() {
      this.$emit('onExport')
    },

    // 跳转新增官方账号
    handleAddOfficialNo() {
      this.$emit('onAddOfficialNo', null)
    },

    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },

    search() {
      let queryParam = this.filterFields(this.queryParam)
      this.$emit('onSearch', queryParam)
    },

    reset() {
      this.queryParam = {
        keyWord: '',
        time: []
      }
      let queryParam = this.filterFields(this.queryParam)
      this.$emit('onSearch', queryParam)
    },

    filterFields(values) {
      const formValue = {}
      Object.keys(values).forEach(i => {
        if (values[i] && values[i].length) {
          if (i === 'time') {
            console.log('time')
            formValue.startTime = values[i][0]
            formValue.endTime = values[i][1]
          } else {
            formValue[i] = values[i]
          }
        }
      })
      return formValue
    }
  }
}
</script>
<style lang="less" scoped>
.table-page-search-submitButtons {
  display: flex;
  justify-content: flex-end;
}
.product {
  display: flex;
  align-items: center;
  overflow: hidden;
  .img {
    display: block;
    margin: 0 2px;
    width: 60px;
    height: 60px;
    border: 1px dashed #f5f5f5;
    object-fit: scale-down;
    cursor: pointer;
  }
  .product-name {
    flex: 1;
    margin-left: 5px;
    width: 80px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    word-break: break-all; /* 追加这一行代码 */
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
  }
}
</style>
<style scoped>
/* For demo */
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
</style>
